/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-21 11:28:36
 * @Description: 首页-控制台-我的添加
 */
import React from "react";
import "./style.scss";
import { Pagination } from "antd";
import { observer, inject } from "mobx-react";
import { openDetail } from "@/utils/util";

@inject("MyAdditionStore")
@observer
class MyAddition extends React.Component {
    componentDidMount() {
        this.props.MyAdditionStore.getTopData();
        this.props.MyAdditionStore.getListData();
    }
    topDataMatchIcon(topData) {
        const data = [
            { name: "APP关联对象", icon: "wdtj_dx", value: 12 },
            { name: "APP使用人群", icon: "wdtj_rq", value: 4 }
        ];
        topData.forEach(d => {
            data.forEach(item => {
                if (item.name === d.name) {
                    item.value = d.value;
                }
            });
        });
        return data;
    }

    render() {
        const { topData, listData } = this.props.MyAdditionStore;
        const renderTopData = this.topDataMatchIcon(topData);
        return (
            <div className="my-addition">
                <h3 className="common-title">我的添加</h3>
                <ul className="top-num-list">
                    {renderTopData.map(d => (
                        <li key={d.icon}>
                            <i className={`icon ${d.icon}-icon`} />
                            <div className="detail">
                                <p className="value">{d.value}</p>
                                <p className="name">{d.name}</p>
                            </div>
                        </li>
                    ))}
                </ul>
                <h3 className="common-title" style={{ marginTop: 20 }}>
                    添加记录
                </h3>
                <ul className="lists-data">
                    <li>
                        <span>添加对象</span>
                        <span>添加类型</span>
                        <span>添加内容</span>
                        <span>添加时间</span>
                        <span>操作</span>
                    </li>
                    {listData.map((item, index) => (
                        <li key={`wdtj-${index}`}>
                            <span>{item.tjdx}</span>
                            <span className={`type type-${item.type}`} />
                            <span>{item.tjnr}</span>
                            <span>{item.time}</span>
                            <span>
                                <button className="btn" onClick={() => openDetail(item.id)}>
                                    查看
                                </button>
                            </span>
                        </li>
                    ))}
                </ul>
                <div className="common-pagination">
                    <Pagination
                        defaultcurrent={6}
                        total={500}
                        onChange={(page, pageSize) => this.props.MyAdditionStore.changePage(page, pageSize)}
                    />
                </div>
            </div>
        );
    }
}

export default MyAddition;
